<template>
	<view class="graybg">
		<view class="rrcard">
			<view class="t">商品信息</view>
			<view class="box topBox">
				<image :src="params.mainPhotoP1"></image>
				<view class="textBox">
					<text class="title">{{params.proName}}</text>
					<text class="disc">数量 {{params.pronum}}</text>
					<text class="price">{{params.skuaName}},{{params.skubName}}</text>
				</view>
			</view>
		</view>
      <view class="rrcard">
      	<view class="t">价格信息</view>
      	<view class="box">
      		<view class="billItem">
      			<view class="flex">
					<text>会员权益：</text>
      				<!-- 原价 -->
					<view>
						<text class="originPrice" >￥{{params.price}}</text>
						<text  style="line-height:70rpx">￥{{(params.price*params.ifHotsale).toFixed(2)}}</text>
					</view>
      				
      			</view>
      			<view class="flex">
					<text>优惠券：</text>
					<view @click="chooseyouhuiquan">{{params.waterName?'-￥'+params.waterPrice:"选择优惠券"}}</view>
				</view>
				<view class="flex">
					<text>合计：</text>
					<text class="price">￥{{price}}</text>
				</view>
      		</view>
      	</view>
      </view>
		<view class="rrcard">
			<view class="t">地址信息</view>
			<view class="box">
				<view class="paddingBox">
					<uni-forms ref="baseForm"  :modelValue="baseFormData" :rules="rules">
						        <cityPicker :column="3" :default-value="defaultValue" :mask-close-able="true" @confirm="confirm" @cancel="cancel" :visible="visible"/>
						     <!--   <view>{{str}}</view> -->
						<uni-forms-item required label="手机" name="Moblie">
							<uni-easyinput v-model="baseFormData.Moblie" placeholder="请输入联系电话" :adjust-position="false"/>
						</uni-forms-item>
						<uni-forms-item required label="姓名" name="UserName">
							<uni-easyinput v-model="baseFormData.UserName" placeholder="请输入姓名" :adjust-position="false"/>
						</uni-forms-item>
						<uni-forms-item required label="省市区" name="ssq">	
							    <uni-easyinput   v-model="baseFormData.ssq" @focus="open" placeholder="请选择省市区" /> 
						</uni-forms-item>
					  <uni-forms-item required label="详细地址" name="Detailaddress">
					  	<uni-easyinput v-model="baseFormData.Detailaddress" placeholder="请输入详细地址" :adjust-position="false"/>
					  </uni-forms-item>
					<!--  <uni-forms-item label="优惠券" name="youhuiquanid" >
					    <view class="yhq" @click="chooseyouhuiquan">{{params.waterName?params.waterName:"选择优惠券"}}</view>
					  </uni-forms-item>
					  <uni-forms-item label="会员权益" >
					   <view class="yhq"> 原价：{{params.price}}  现价{{params.price*params.ifHotsale}}</view>
					  </uni-forms-item> -->
					</uni-forms>
				</view>
			</view>
			
		</view>
		
		<view style="height:220rpx"></view>

		<view class="bottom">
			<!-- <text class="price"></text> -->
			<text class="yy" @click="pay()" >提交订单</text>
		</view>
	<!-- 	<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="info" cancelText="取消" confirmText="确定" content="是否确认支付？" @confirm="dialogConfirm" 
				@close="dialogClose"></uni-popup-dialog>
		</uni-popup>

		<uni-popup ref="alertPayOk" type="dialog">
			<uni-popup-dialog type="success" confirmText="查看订单详情" content="支付成功" @confirm="goBillDetail"  @close="goBillDetail">
			</uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="alertPayWrong" type="dialog">
			<uni-popup-dialog type="error" confirmText="查看订单详情" content="支付失败" @confirm="goBillDetail" @close="goBillDetail">
			</uni-popup-dialog>
		</uni-popup> -->

	</view>

</template>

<script setup>
	 import cityPicker from '/components/piaoyi-cityPicker/piaoyi-cityPicker.vue'
import { fullproinfopage,createorderbygetjson } from '@/common/api.js';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import * as api from '@/common/api.js';
	import _ from 'lodash'
	import {
		ref,
		getCurrentInstance
	} from 'vue';
	import dayjs from 'dayjs'
	import {
		getCurrUser
	} from '../../common/login';
    const rules=ref({
		    Moblie:{
				rules:[
				   { required: true, errorMessage: '联系电话不能为空'},
				   {  errorMessage: '请填写正确手机号码',pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/}
				]} ,
		    UserName:{
				rules:[
		         { required: true, errorMessage: '姓名不能为空'}
		        ]} ,
			
			ssq:{
				rules:[
			     { required: true, errorMessage: '省市区不能为空'}
			   ]}, 
			 Detailaddress:{
			   	rules:[
			        { required: true, errorMessage: '省市区不能为空'}
			 ]}, 
	})
   	const app = getApp();
	const {
		proxy
	} = getCurrentInstance()
	const params=ref('')
	const detail=ref({})
	const visible=ref(false)
	const defaultValue=ref('')
	const baseFormData=ref({})
	const userData=ref({})
	const youhuiquan=ref([])
	const price=ref(0)
	onLoad((option) => {
		  let data=JSON.parse(option.params)
		  params.value=data
		  if(option.baseFormData){
			   baseFormData.value=JSON.parse(option.baseFormData)
		  }
		 
		  let currUser = uni.getStorageSync('currUser')
		  userData.value=currUser
		  console.log(data)
	   //    listwaterinfobyselective({userid:currUser.userid,waterStatus:1,waterType:data.proId}).then(res=>{
			 //  youhuiquan.value=res.extend.list
		  // })
		  if(data.waterName){
			  console.log(1)
			  price.value = (data.price - data.waterPrice).toFixed(2)
		  }else{
			   console.log(data.price)
			   console.log(data.ifHotsale)
			   price.value = (data.price*data.ifHotsale).toFixed(2)
		  }
		  console.log(price.value)
		 
	})
	function chooseyouhuiquan(){
		uni.redirectTo({
			url: '/pages/usercenter/youhuiquan?params='+JSON.stringify(params.value)+'&baseFormData='+JSON.stringify(baseFormData.value),
		});
	}
 function open () {
	          uni.hideKeyboard()
               visible.value = true
            }
            function confirm (val) {
				baseFormData.value.ssq=val.name
                baseFormData.value.shenfeng=val.provinceName
				 baseFormData.value.shiji=val.cityName
				  baseFormData.value.quji=val.areaName
                visible.value = false
            }
            function cancel () {
                visible.value =false
            }


	function pay(n) {

		let resp=/^1[3|4|5|6|7|8|9][0-9]\d{8}$/
	    if(!resp.test(baseFormData.value.Moblie)){
			uni.showToast({
				title: '请填写正确的手机号码',
				icon: 'none',
				duration: 2000
			})
			return
		}
		if(!baseFormData.value.UserName){
			uni.showToast({
				title: '请填写姓名',
				icon: 'none',
				duration: 2000
			})
			return
		}
		if(!baseFormData.value.ssq){
			uni.showToast({
				title: '请选择省市区',
				icon: 'none',
				duration: 2000
			})
			return
		}
		if(!baseFormData.value.Detailaddress){
			uni.showToast({
				title: '请填写详细地址',
				icon: 'none',
				duration: 2000
			})
			return
		}
		let form={
			
			...params.value,
			...baseFormData.value,
			price:price.value,
			youhuiquanid:params.value.waterNum?params.value.waterNum:0,
			userid:userData.value.userid,
			proid:params.value.proId
		}
		console.log(userData)
		console.log(form)
		createorderbygetjson(form).then(res=>{
			if(res.code==100){
				uni.navigateTo({
					url: '/pages/index/recoveryConfirm?orderId='+res.extend.OrderInfo.orderId
				});
			}
		})
	}



</script>

<style lang="scss" scoped>
	.billItem {
		width: auto;

		.uni-input {
			padding: 15rpx 0;
			color: #000;
		}

		.trInput {
			text-align: right;
			float: right;
		}
	}

	.rrcard .box {
		padding: 0 0 1px;
		margin: 20rpx 0 0;
	}

	.graybg {
		background: #f7f8fa;
		//height: 100vh;
		width: 100vw;
		overflow: auto;
	}

	.whitebg {
		background: #fff;
		margin-top: 15rpx;
		border-radius: 20rpx;
		margin-bottom: 180rpx;
	}


	.uni-list-cell::after {
		display: none;
	}

	.littleimgBox {
		display: flex;
		align-items: center;
	}

	.littleimg {
		width: 50rpx;
		height: 50rpx;
		margin-right: 15rpx;
	}

	.billItem .price {
		font-weight: bold;
		font-size: 45rpx;
		color: #ff8124;
	}

	.originPrice {
		line-height: 70rpx;
		margin: 0 0 0 6rpx;
		color: #999;
		text-decoration: line-through;
	}
	.bottom{
		position: fixed;
		bottom:0;
		left:0;
		width:100%;
		height:80rpx;
		z-index:10;
		background:#fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		// padding-left:30rpx;
		.price{
			color:#000;
			font-weight: bold;
			font-size:14px;
		}
		.yy{
			// margin-left:30rpx;
			background: #ea6011;
			color:#fff;
			flex:1;
			height:80rpx;
			line-height:80rpx;
			text-align: center;;
		}
	}
	.topBox{
		display: flex;
		padding:30rpx!important;
		image{
			width:220rpx;
			height:220rpx;
		}
		.textBox{
			box-sizing: border-box;
			padding: 10rpx;;
			flex:1;
			margin-left:20rpx;
			display: flex;
			height:220rpx;
			flex-direction: column;
			// justify-content: space-between;
			.title{
				font-size:16px;
				font-weight: bold;
			}
			.price{
				 font-size:12px;
			}
			.disc{
				display: -webkit-box;
				  -webkit-line-clamp: 2;
				  -webkit-box-orient: vertical;
				  overflow: hidden;
				  text-overflow: ellipsis;
				  font-size:12px;
			}
		}
	}
	.paddingBox{
		box-sizing: border-box;
		width:100%;
		padding:30rpx;
		.typeBox{
			margin-top:20rpx;
			display: flex;
			flex-wrap: wrap;
			width:100%;
			max-height:142px;
			overflow: hidden;
			.typeItem{
				height:42px;
				width:30%;
				margin-right:2.5%;
				border:1px dashed #ddd;
                display: flex;
				flex-direction: column;
				text-align:center;
				border-radius:5rpx;
				padding:20rpx 0;
				margin-bottom:15rpx;
				font-size:13px;
				.disabled{
					color:#b6b6b6;
				}
			}
			.active{
				border:1px dashed #ea6011;
			   color:#ea6011;
			}
		}
		.typeBox.exsp{
			height:auto;
			max-height:none;
			overflow: normal;
			
		}
		.skip{
			text-align: center;
			color:#ea6011;
		}
	}
	.radioGroup{
		 display: flex;
		 flex-wrap: wrap;
		 position:relative;
		 .radio{
			 //display: none;
			visibility: hidden;
			position:absolute;
		 }
	}
	.btnCity{
		padding:0;
	}
	.yhq{
		margin-top:10px;
		text-align:right;
	}
	.flex{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	::v-deep{
		.uni-forms-item__content{
			
		}
	}
</style>
